<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>首页</li>
        <li>产品介绍</li>
        <li>关于我们</li>
        <span>span标签</span>
    </ul>
    <button>添加</button>
</body>
<script>

    //事件委托，这样新添加的li并不能弹出内容
    var btn = document.querySelector('button')
    var ul = document.querySelector('ul')
    btn.onclick = () => {
        var li = document.createElement("li")
        li.innerText = '人才招聘'
        ul.appendChild(li)
    }
    // var lis = document.querySelectorAll('ul>li')
    // for (var i = 0; i < lis.length; i++) {
    //     lis[i].onclick = function () {
    //         alert(this.innerText)
    //     }
    // }

    //
    // ul.onclick = function (e) {
    //     var e = e || window.event;
    //     var target = e.target//target属性用于获取目标元素，此时target就是每个li标签
    //     console.log(target.innerText);
    // }

    //兼容写法和区别其他标签
    ul.onclick=function(e){
        var e=e||window.event;
        var target=e.target||e.srcElement;//兼容ie
        if(target.nodeName=='LI'){
            console.log(target.innerText);
        }//判断标签是不是li标签
    }
</script>

</html>